<!DOCTYPE html>
<!--suppress CssInvalidPseudoSelector -->
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      th:style="'background:url(/images/bg/2.png);no-repeat; background-size: cover;'">
    <!--<html lang="en" xmlns:th="http://www.thymeleaf.org" th:style="'background:url(/admin/images/bg/'+@{${pic}}+');no-repeat; background-size: cover;'">-->
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width,initial-scale=1"/>
        <link rel="shortcut icon" th:href="@{/images/logo.png}" type="image/x-icon"/>
        <title>登录</title>
        <link th:href="@{//cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css}" rel="stylesheet"/>
        <link th:href="@{//cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css}" rel="stylesheet"
              type="text/css"/>
        <link href="/css/style.min.css" rel="stylesheet" type="text/css"/>
        <link th:href="@{//cdn.bootcdn.net/ajax/libs/limonte-sweetalert2/6.4.1/sweetalert2.min.css}" rel="stylesheet"/>
        <link href="/layui/css/layui.css" rel="stylesheet">
        <style>
            .panel-shadow {
                -moz-box-shadow: 0px 0px 10px 0px rgba(39, 49, 65, 0.1);
                -webkit-box-shadow: 0px 0px 10px 0px rgba(39, 49, 65, 0.1);
                box-shadow: 0px 0px 10px 0px rgba(39, 49, 65, 0.1);
            }

            .bg-overlay {
                -moz-border-radius: 6px 6px 0 0;
                -webkit-border-radius: 6px 6px 0 0;
                background-color: rgba(47, 51, 62, 0.3);
                border-radius: 6px 6px 0 0;
                height: 100%;
                left: 0;
                position: absolute;
                top: 0;
                width: 100%;
            }

            .input-border {
                font-size: 14px;
                width: 100%;
                height: 40px;
                border-radius: 0;
                border: 1px solid #dadada;
                /*border-bottom: 1px solid #dadada;*/
            }

            input:-internal-autofill-previewed,
            input:-internal-autofill-selected {
                -webkit-text-fill-color: #FFFFFF !important;
                transition: background-color 5000s ease-in-out 0s !important;
            }

            .bg-img > h3 {
                text-shadow: 0px 2px 3px #555;
                color: #cac9c8;
            }

            .login-box {
                /* 设置透明度 */
                background-color: rgba(255, 255, 255, 0.5);
                /* 去掉边框 */
                border: none;
                /* 去掉阴影 */
                box-shadow: none;
            }
            .login-param {
                background-color: rgba(255, 255, 255, 0.5) !important;
                border: none;
                border-radius: 5px;
                width: 200px;
                margin-bottom: 10px;
                box-shadow: none;
                color: black;
            }
        </style>

    </head>
    <body th:style="'background:url(/images/bg/bg-login2.jpg);no-repeat; background-size: cover;'">
        <div style="margin: 0 auto; padding-bottom: 0%; padding-top: 11.5%; width: 350px; ">
            <div class="container">
                <div class="row justify-content-center">
                    <div class=" col-lg-4 col-md-6 col-sm-8 col-10">
                        <form class="card-body" method="post" id="loginForm" onsubmit="return checkForm();">

                            <div class="form-group">
                                <div class="col-xs-12">
                                    <input id="username" class="login-param input-lg input-border form-control"
                                           name="username" type="text"
                                           required=""
                                           placeholder="账号:"
                                           th:value="${session.rememberU} != null?${session.rememberU}:''"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-xs-12">
                                    <input class="login-param  input-lg input-border form-control" name="password"
                                           type="password" required=""
                                           placeholder="密码:"
                                           th:value="${session.rememberP} != null?${session.rememberP}:''"/>
                                </div>
                            </div>

<!--                            <img id="verCodeImg" src="/captcha" width="200px" height="40px"-->
<!--                                 style="margin: 0px 0 10px 10px;border-radius: 6px"/>-->
<!--                            <div class="form-group">-->
<!--                                <div class="col-xs-12">-->
<!--                                    <input id="token" class="login-param input-lg input-border form-control"-->
<!--                                           name="token" type="text"-->
<!--                                           required=""-->
<!--                                           placeholder="验证码:"/>-->
<!--                                </div>-->
<!--                            </div>-->
                            <div class="form-group">
                                <div class="col-xs-12">
                                    <div class="checkbox checkbox-danger" style="width: 200px; color: black">
                                        <input id="checkbox-signup" name="remember" type="checkbox" checked/>
                                        <label for="checkbox-signup">记住密码</label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group text-center m-t-40">
                                <div class="col-xs-12">
                                    <button class="login-param btn  btn-lg btn-rounded btn-block w-lg waves-effect waves-light"
                                            style="box-shadow: 0px 0px 4px #868282; opacity: 1" type="submit">登&nbsp;录
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- Main  -->
        <script th:src="@{//cdn.bootcdn.net/ajax/libs/jquery/2.2.3/jquery.min.js}"></script>
        <script th:src="@{//cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js}"></script>
        <script th:src="@{//cdn.bootcdn.net/ajax/libs/limonte-sweetalert2/6.4.1/sweetalert2.min.js}"></script>
        <!--        <script src='https://www.hCaptcha.com/1/api.js' async></script>-->
        <!--        <script th:src="@{//unpkg.com/easy-captcha@0.1.5/captcha.js}"></script>-->

        <script src="/js/base.js"></script>
        <script type="text/javascript">
            const tale = new $.tale();
            $('#verCodeImg').click(function flushVerCode() {
                this.src = this.src + "?" + Math.random();
            });

            function checkForm() {
                tale.post({
                    url: '/admin/login',
                    data: $("#loginForm").serialize(),
                    success: function (result) {
                        if (result.code == '200') {
                            window.location.href = '/admin/page/home';
                        } else {
                            tale.alertError(result.msg || '登录失败');
                        }
                    },
                    error: function (e) {
                        tale.alertError(e.msg || '登录失败');
                    }
                });
                return false;
            }
        </script>
    </body>

</html>